<template>
  <div class="home">
    <div class="header"><Header :url="userImageUrl" /></div>    
    <div class="User">
      <LearningStatistics
        :todayTime="learningTimeCount"
        :yesterdayTime="yesterdayTimeCount"
        :weeklyTime="weeklyTimeCount"
        :lineChartData="lineChartData"
      />
      <WordStatistics
        :reviewWordCount="reviewWordCount"
        :learnedWordCount="learnedWordCount"
        :totalWordCount="totalWordCount"
      />
      <div class="user-greeting">
        <User :url="userImageUrl" :userName="userName" />
      </div>
    </div>    <ChartStatistics
      :columnChartData="columnChartData"
      :circleChartData="circleChartData"
    />
    
  </div>
</template>

<script>
// @ is an alias to /src
import Header from "@/components/Header.vue";
import User from "@/components/User.vue";
import LearningStatistics from "@/components/statistic/LearningStatistics.vue";
import WordStatistics from "@/components/statistic/WordStatistics.vue";
import ChartStatistics from "@/components/statistic/ChartStatistics.vue";
import request from "../utils/request";
import DataLoader from "../utils/dataLoader";

export default {
  name: "Home",  
  components: {
    LearningStatistics,
    WordStatistics,
    ChartStatistics,
    Header,
    User,
  },
  data() {
    return {
      reviewWordCount: 0,
      learnedWordCount: 0,
      totalWordCount: 0,
      learningTimeCount: 0,
      yesterdayTimeCount:0,
      weeklyTimeCount:0,
      columnChartData: [],   //柱状图数据
      circleChartData: [],   //饼图数据
      lineChartData: [],    //曲线图数据
      flag: true,
      dataLoader:new DataLoader()
    };
  },

  created() {
    this.init();
  },
  methods:{
    init: function () {
      console.log("调用init");
      let userJson = localStorage.getItem("user");
      if (!userJson) {
        this.$router.push("/login");
        return
      } else {
        let user = JSON.parse(userJson);
        this.$store.commit('setUser', user);        request.get("/statistic/" + user.userID + "/" + user.targetBook).then(res => {
          this.reviewWordCount = res.data.reviewWordCount;
          this.learnedWordCount = res.data.learnedWordCount;
          this.totalWordCount = res.data.totalWordCount;
          this.columnChartData = this.dataLoader.loadData("column", res.data.columnChartData);
            // 调试：检查原始数据
          console.log("原始 circleChartData:", res.data.circleChartData);
          console.log("原始 learnedWordCount:", res.data.learnedWordCount);
          
          // 处理圆环图数据，确保没有小数
          this.circleChartData = this.processCircleChartData(res.data.circleChartData);
          
          console.log("处理后 circleChartData:", this.circleChartData);
          console.log("处理后 learnedWordCount:", this.learnedWordCount);
          
          this.lineChartData = this.dataLoader.loadData("line", res.data.lineChartData);
          this.learningTimeCount = this.lineChartData[6].time;
          this.yesterdayTimeCount = this.lineChartData[5].time;
          this.weeklyTimeCount = 0;          for (const item of this.lineChartData)
            this.weeklyTimeCount += item.time;
        })
      }
    },
    
    // 处理圆环图数据，确保数值为整数
    processCircleChartData(data) {
      if (!data || !Array.isArray(data)) {
        return [];
      }
      
      return data.map(item => {
        return {
          ...item,
          value: Math.round(item.value || 0), // 四舍五入为整数
          // 如果需要其他字段的处理，可以在这里添加
        };
      });
    },
  },
  computed: {
    userImageUrl() {
      return this.$store.getters.userImageUrl;
    },
    userName() {
      return this.$store.state.user.userName;
    },

  },
};
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  background-color: rgb(239, 242, 245);
  min-height: 100vh;
}

.header {
  height: 50px;
}

.User {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  min-height: 320px;
  align-items: stretch;
  padding: 25px;
  margin-bottom: 40px;
}

.user-greeting {
  flex: 1;
  min-width: 300px;
  min-height: 279px;
  display: flex;
  align-items: stretch;
}

.feature-menu {
  margin: 25px 25px 0 25px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.feature-menu:hover {
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);
  transform: translateY(-3px);
}

.feature-title {
  margin-bottom: 15px;
}

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 100px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  text-decoration: none;
  color: white;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.feature-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

.feature-item i {
  font-size: 28px;
  margin-bottom: 8px;
}

.feature-item span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.footer {
  align-self: center;
  height: 200px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(239, 242, 245);
}

@media (max-width: 707px) {
  .User {
    flex-direction: column;
    padding: 15px;
  }
  
  .user-greeting {
    min-height: 231px;
    min-width: unset;
  }

  .feature-menu {
    margin: 10px;
  }
  
  .features {
    justify-content: center;
  }
}
</style>



